<template>
   <div class="t-content clearfix">
       <div class="item-content clearfix">
          <div class="item-media item-left fl">
              <div class="item-title">
                <img src="~assets/img/banner-title.png" alt="">
              </div>
              <div class="item-download">
                 <div class="item-ercode">
                     <div  class="ercode-btn ercode-ios">
                        <img src="~assets/img/ercode-ios.png" alt="">
                     </div>
                     <div class="ercode-btn ercode-android">
                        <img src="~assets/img/ercode-android.png" alt="">
                     </div>
                 </div>
                 <div class="item-btn">
                    <div class="item-btn-app">
                       <a href="//rcshow.tv/apps/download/getApp.php?type=ios&source=app_constellation" target="_blank" class="link-btn link-appstore"></a>
                       <a href="//rcshow.tv/apps/download/getApp.php?type=android&source=app_constellation" target="_blank" class="link-btn link-android"></a>
                    </div>
                    <div class="item-btn-pc">
                       <a href="//www.raidcall.com.tw/download.php" target="_blank" class="link-btn link-pc"></a>
                    </div>
                 </div>
              </div>
          </div>
          <div class="item-swiper item-right fl">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                   <div class="swiper-img">
                     <p class="item-title">
                       <img src="~assets/img/banner-name.png" alt="">
                     </p>
                     <p class="item-img" :style="{'background':`url(${ require('assets/img/slide/1.png')}) center`,'backgroundSize':'cover'}"></p>                     
                   </div>
                </div>
                <div class="swiper-slide">
                  <div class="swiper-img">
                       <p class="item-title">
                       <img src="~assets/img/banner-name.png" alt="">
                     </p>
                      <p class="item-img" :style="{'background':`url(${ require('assets/img/slide/1-1.png')}) center`,'backgroundSize':'cover'}"></p>
                   </div>
                  </div>
                <div class="swiper-slide">
                    <div class="swiper-img">
                       <p class="item-title">
                       <img src="~assets/img/banner-name.png" alt="">
                     </p>
                      <p class="item-img" :style="{'background':`url(${ require('assets/img/slide/1.png')}) center`,'backgroundSize':'cover'}"></p>
                   </div>
                </div>
              </div>
            </div>
          </div>                 
       </div>
       <div class="t-cover"> </div>  
       <footcompont></footcompont>
    </div>
</template>

<script>
import store from "src/store/index";
import { sharefacebook, alertDialogCommpent } from "src/api/util";
import Swiper from "swiper/dist/js/swiper.js";
import footcompont from "commpents/footcompont.vue";
export default {
  data() {
    return {};
  },
  components: {
    footcompont: footcompont
  },
  methods: {},
  mounted: function() {
    var vm = this;
    var mySwiper = new Swiper(".swiper-container", {
      autoplay: {
        disableOnInteraction: false,
        delay: 4000 //1秒切换一次
      },
      // effect: "fade",
      fadeEffect: {
        crossFade: true
      },
      speed: 800,
      mode: "horizontal",
      resistance: "100%",
      loop: true,
      mousewheelControl: true,
      grabCursor: true,
      observer: true,
      on: {
        transitionStart: function(swiper) {
          $(".swiper-slide-active").find('.swiper-img').addClass('fadeOut')
        },
        transitionEnd: function(swiper) {
          $(".swiper-slide-active").find('.swiper-img').removeClass('fadeOut')
        }
      }
    });
  },
  computed: {
    userinfo() {
      return store.getters.userinfo;
    }
  }
};
</script>
<style lang="less" scope>
@import url("~assets/less/_mixins.less");
@import "~swiper/dist/css/swiper.css";
.t-content {
  height: 1020px;
  width: 100%;
  background: url("@{img-url}bg.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .item-content {
    width: 1200px;
    margin: auto;

    .item-media {
      margin-top: 105px;
      .item-title {
        img {
          width: 609px;
          height: 190px;
        }
      }
      .item-download {
        .item-ercode {
          margin-top: 80px;
          .ercode-btn {
            display: inline-block;
            margin: 0 18px 0 0;
          }
        }
        .item-btn {
          margin: 12px 0;
          .item-btn-app {
            margin-bottom: 12px;
            a.link-btn {
              display: inline-block;
              width: 182px;
              height: 58px;
              margin-right: 18px;
              vertical-align: middle;
              &:hover {
                opacity: 0.9;
              }
              &.link-appstore {
                background: url("@{img-url}btn-download-appstore.png") no-repeat;
                background-size: 100%;
              }
              &.link-android {
                background: url("@{img-url}btn-download-android.png") no-repeat;
                background-size: 100%;
              }
            }
          }
          .item-btn-pc {
            a.link-btn {
              display: block;
              width: 392px;
              height: 58px;
              background: url("@{img-url}btn-download-pc.png") no-repeat;
              &:hover {
                opacity: 0.9;
              }
            }
          }
        }
      }
    }
    .item-swiper {
      // margin-top: 20px;
      width: 930px;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
      .swiper-img {
        margin: 20px 20px 0 20px;
        position: relative;
        .item-img {
          height: 1000px;
          width: 674px;
        }
        .item-title {
          position: absolute;
          bottom: 200px;
          left: 330px;
        }
      }
      .swiper-slide-active {
        .animation(slide 1s);
        // .swiper-img {
        //   .animation(slide 1s);
        // }
      }
    }
  }
  .t-cover {
    position: absolute;
    width: 1200px;
    height: 463px;
    bottom: 0;
    right: 0;
    z-index: 1;
    background: url("@{img-url}bg-cover.png") no-repeat;
    background-size: cover;
  }
}
</style>